<template>
  <div class="question-container">
    <div class="app-container">
      <el-card>
        <!-- 搜索 -->
        <el-row class="question-random">
          <el-col :span="12">
            <el-form :inline="true" :model="questionRandom" class="demo-form-inline" label-width="80px">
              <el-form-item label="关键字" size="small">
                <el-input v-model="questionRandom.keyword" />
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-button size="small" @click="clearKeyword()">清除</el-button>
            <el-button type="primary" size="small" @click="searchKeyword()">搜索</el-button>
          </el-col>
        </el-row>
        <!-- 数据条数 -->
        <el-alert
          :title="`数据一共 ${total}  条`"
          style="margin-bottom: 15px"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        />
        <!-- 表格数据 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="220" />
          <el-table-column prop="questionType" label="题型" width="80" :formatter="questionFormatter" />
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template #default="{ row }">
              <div v-for="item in row.questionIDs" :key="item.number">
                <a href="#" style="color: #09f" @click.prevent="previewQuestion(item)">{{ item.number }}</a>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180" />
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="170" />
          <el-table-column prop="accuracyRate" label="正确率(%)" width="165" />
          <el-table-column prop="userName" label="录入人" width="160" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="danger"
                size="small"
                circle
                icon="el-icon-delete"
                plain
                title="删除"
                @click="delQuestion(row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="margin-top: 20px; text-align: right"
          background
          :current-page="questionRandom.page"
          :page-sizes="[20, 30, 50, 100]"
          :page-size="questionRandom.pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <!-- 预览 -->
        <question-random-preview
          ref="previewRef"
          :data="questionData"
          :preview-dialog-visible.sync="previewDialogVisible"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '../../api/hmmm/questions'
import { questionType } from '../../api/hmmm/constants'
import questionRandomPreview from '../components/questionRandomPreview.vue'
export default {
  name: 'QuestionRandom',
  components: { questionRandomPreview },
  data() {
    return {
      previewDialogVisible: false,
      questionRandom: {
        keyword: null,
        // 当前页
        page: 1,
        // 大小
        pagesiza: 20
      },
      // 总页数
      total: 0,
      tableData: [],
      questionData: {}
    }
  },
  created() {
    this.getQuestionRandom()
  },
  methods: {
    // 获取所有列表
    async getQuestionRandom() {
      const {
        data: { items, counts }
      } = await randoms(this.questionRandom)
      // console.log(res)
      // console.log(items)
      this.tableData = items
      this.total = counts
    },
    // 单选多选
    questionFormatter(row) {
      return questionType.find(item => item.value === +row.questionType).label
    },
    // 清空关键字
    clearKeyword() {
      this.questionRandom.keyword = null
    },
    // 页数发生变化的时候触发
    handleCurrentChange(newPage) {
      this.questionRandom.page = newPage
      this.getQuestionRandom()
    },
    // 条数发生变化的时候触发
    handleSizeChange(newPageSize) {
      this.questionRandom.pagesize = newPageSize
      this.questionRandom.page = 1
      this.getQuestionRandom()
    },
    // 搜索
    searchKeyword() {
      this.questionRandom.page = 1
      this.getQuestionRandom()
    },
    // 删除题组
    async delQuestion(data) {
      await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await removeRandoms(data)
      if (this.tableData.length === 1 && this.questionRandom.page > 1) {
        this.questionRandom.page--
      }
      this.$message.success('删除成功')
      this.getQuestionRandom()
      // console.log(res)
    },
    // 预览
    previewQuestion(questionData) {
      // console.log(questionData)
      // console.log(111)
      this.previewDialogVisible = true
      this.questionData = questionData
      this.$nextTick(() => {
        this.$refs.previewRef.openPreview()
      })
    }
  }
}
</script>

<style>
.app-container {
  padding: 0 10px;
  margin: 10px 0;
}
</style>
